<template>
  <el-row justify="space-between">
    <!-- tabs切换 -->
    <el-col :span="8">
      <el-tabs
        v-model="state.currentTabIndex"
        :stretch="true"
        @tab-click="tabsCheckFn"
      >
        <el-tab-pane
          v-for="(item, index) in state.itemMeau"
          :key="`${item.name}_${index}`"
          :label="item.label"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>
    </el-col>
    <!-- 搜索 -->
    <el-col :span="6" class="header-body-right">
      <el-autocomplete
        v-model="state.autocompleteSel"
        placeholder="输入想要搜索的内容"
        :fetch-suggestions="searchFn"
      >
        <!-- <template #prepend>
                <el-select
                  size="default"
                  v-model="state.searchOption"
                  class="header-body-select"
                >
                  <el-option
                    class="my-select"
                    v-for="(item, index) in state.searchOptionList"
                    :label="item.name"
                    :value="item.value"
                    :key="item.value + '_' + index"
                  />
                </el-select>
              </template> -->
        <template #append>
          <el-button :icon="Search" @click="submitSearch" />
        </template>
      </el-autocomplete>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import defaultData from '@/data/index'
const state = reactive({
  currentTabIndex: 'article', //选中索引
  itemMeau: computed(() => {
    return defaultData.headerMiddleTabsData
  }), //菜单list
})
const tabsCheckFn = (tab: TabsPaneContext, event: Event) => {
  state.currentTabIndex = tab.props.name
  console.log('event', event)
}
</script>
<style lang="scss" scoped></style>
